<template>
  <div class="page-content">
    <el-row>
      <!-- <el-col :xs="24" :sm="12" :lg="6">
          <el-input placeholder="部门名称"></el-input>
        </el-col> -->
      <div style="width: 12px"></div>
      <el-col :xs="24" :sm="12" :lg="6" class="el-col2">
        <el-button v-ripple>刷新</el-button>
        <el-button @click="showDialog('add')" v-ripple>新增等级</el-button>
      </el-col>
    </el-row>

    <art-table :data="tableData">
      <template #default>
        <el-table-column label="ID" prop="id" width="55" />
        <el-table-column label="等级名称" prop="typename" />
        <el-table-column label="充值金额" prop="weight" />
        <el-table-column label="创建时间：" prop="date">
          <template #default="scope">
            {{ formatDate(scope.row.date) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100px">
          <template #default="scope">
            <el-row>
              <button-more :list="[
                { key: 'edit', label: '编辑' },
                { key: 'delete', label: '删除' }
              ]" @click="buttonMoreClick($event, scope.row)" />
            </el-row>
          </template>
        </el-table-column>
      </template>
    </art-table>

    <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增等级' : '编辑等级'" width="30%"
      :close-on-click-modal="false">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="等级名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="描述" prop="des">
          <el-input v-model="form.des" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit(formRef)">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ButtonMoreItem } from '@/components/core/forms/ArtButtonMore.vue'
import { useMenuStore } from '@/store/modules/menu'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { formatMenuTitle } from '@/router/utils/utils'
import { id, tr } from 'element-plus/es/locale'

const dialogVisible = ref(false)
const permissionDialog = ref(false)
const menuList = computed(() => useMenuStore().getMenuList)

const formRef = ref<FormInstance>()

const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入等级名称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  des: [{ required: true, message: '请输入等级描述', trigger: 'blur' }]
})

const form = reactive({
  id: '',
  name: '',
  des: '',
  status: true
})

const tableData = reactive([
  {
    id: '1',
    typename: '青铜',
    weight: '10',
    date: '2021-01-08 12:30:45',
    status: 1,
    showWorkTab: true
  },
  {
    id: '1',
    typename: '白银',
    weight: '20',
    date: '2021-01-09 12:30:45',
    status: 2
  },
  {
    id: '3',
    typename: '黄金',
    weight: '30',
    date: '2021-01-10 12:30:45',
    status: 3
  },
  {
    id: '4',
    typename: '钻石',
    weight: '40',
    date: '2021-01-11 12:30:45',
    status: 4
  }
])

const dialogType = ref('add')

const showDialog = (type: string, row?: any) => {
  dialogVisible.value = true
  dialogType.value = type

  if (type === 'edit' && row) {
    form.id = row.id
    form.name = row.name
    form.des = row.des
    form.status = row.status === 1
  } else {
    form.id = ''
    form.name = ''
    form.des = ''
    form.status = true
  }
}

const buttonMoreClick = (item: ButtonMoreItem, row: any) => {
  if (item.key === 'permission') {
    showPermissionDialog()
  } else if (item.key === 'edit') {
    showDialog('edit', row)
  } else if (item.key === 'delete') {
    deleteRole()
  }
}

const showPermissionDialog = () => {
  permissionDialog.value = true
}

const defaultProps = {
  children: 'children',
  label: (data: any) => formatMenuTitle(data.meta?.title) || ''
}

const deleteRole = () => {
  ElMessageBox.confirm('确定删除该等级吗？', '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  }).then(() => {
    ElMessage.success('删除成功')
  })
}

const handleSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return

  await formEl.validate((valid) => {
    if (valid) {
      const message = dialogType.value === 'add' ? '新增成功' : '修改成功'
      ElMessage.success(message)
      dialogVisible.value = false
      formEl.resetFields()
    }
  })
}

const formatDate = (date: string) => {
  return new Date(date)
    .toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })
    .replace(/\//g, '-')
}
</script>

<style lang="scss" scoped>
.page-content {
  .svg-icon {
    width: 1.8em;
    height: 1.8em;
    overflow: hidden;
    vertical-align: -8px;
    fill: currentcolor;
  }
}
</style>